<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title></title>
	<link type="text/css" rel="stylesheet" href="css/jquery-ui.css" />
	<link type="text/css" rel="stylesheet" href="../../rickshaw/src/css/graph.css" />
	<link type="text/css" rel="stylesheet" href="../../rickshaw/src/css/detail.css" />
	<link type="text/css" rel="stylesheet" href="../../rickshaw/src/css/legend.css" />
	<link type="text/css" rel="stylesheet" href="../../rickshaw/src/css/extensions.css" />
	<link rel="stylesheet" href="../../css/visualization.css" type="text/css" media="screen" />

	<script type="text/javascript" src="../../rickshaw/vendor/d3.min.js"></script>
	<script type="text/javascript" src="../../rickshaw/vendor/d3.layout.min.js"></script>

	<script type="text/javascript" src="javascript/jquery.min.js"></script>
	<script type="text/javascript" src="javascript/jquery-ui.min.js"></script>


	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Class.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Compat.ClassList.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Ajax.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Renderer.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Renderer.Area.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Renderer.Line.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Renderer.Bar.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Renderer.ScatterPlot.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.RangeSlider.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.HoverDetail.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Annotate.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Legend.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Axis.Time.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Axis.X.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Behavior.Series.Toggle.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Behavior.Series.Order.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Smoother.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Unstacker.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Fixtures.Time.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Fixtures.Number.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Fixtures.RandomData.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Fixtures.Color.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Color.Palette.js"></script>
	<script type="text/javascript" src="../../rickshaw/src/js/Rickshaw.Graph.Axis.Y.js"></script>
	<script type="text/javascript" src="../../rickshaw/js/extensions.js"></script>

	<script type="text/javascript" src="../../scripts/header.js"></script>

    <script type="text/javascript" src="../../basicstats.txt"></script>
    <script type="text/javascript" src="../../info.txt"></script>
	<script type="text/javascript" src="data/info.txt"></script>
	<script type="text/javascript" src="data/markers.txt"></script>

</head>
<body>

<script  type="text/javascript">
  var info = jQuery.parseJSON(infostr);
  var name = info.name
  var date = info.date
  var ipcfilename = "data/".concat(info.name.concat("-ipc.json"));
  var intervalsize = info.intervalsize;
  markerinfo = jQuery.parseJSON(markerstr);
  document.title = name+": McPAT visualization";
  currentdetail = "simple";
  currentnormalized = true;

  writeHeader('mcpat');
</script>


<div id="content">
  <form id="right_panel">
      <div id="legend"></div>
  </form>

  <form id="side_panel">
    <div id="renderer_form" class="toggler" style="display: none;">
      <input type="radio" name="renderer" id="area" value="area" checked >
      <label for="area">area</label>
    </div>
    <section>
      <div id="offset_form">
         <input type='radio' id='powerselect' name='mcpatselect' value='power' onchange='createGraph(this.value);'/>
         <span>Power (W)</span><br />
         <input type='radio' id='energyselect' name='mcpatselect' value='energy' onchange='createGraph(this.value);'/>
         <span>Energy (J)</span><br />
	<input type='radio' id='energypercentageselect' name='mcpatselect' value='energypercentage' onchange='createGraph(this.value);'/>
         <span>Energy (%)</span><br />
      </div>

      <script type="text/javascript">
        document.getElementById('powerselect').checked = true;
      </script>
    </section>
    <div id="offset_form" style="display: none;">
      <label for="stack">
      <input type="radio" name="offset" id="stack" value="zero" checked>
      <span>stack</span>
      </label>
    </div>
    <div id="interpolation_form" style="display: none;">
      <label for="step">
      <input type="radio" name="interpolation" id="step" value="step-after" checked>
      <span>step</span>
      </label>
    </div>
    <section>
	<h6>Smoothing</h6>
	<div id="smoother"></div>
    </section>
    <section>
      <input type="checkbox" name="interpolation" id="ipcgraphshow" value="step-after">
      <span>Show IPC graph</span>
      <script type="text/javascript">
        document.getElementById('ipcgraphshow').checked = false;
      </script>
    </section>
	<div id="yaxislabel" class="vertical-text">Power (W)</div>
  </form>
  <div id="chart_container">
    <div id="chart"></div>
    <div id="xaxislabel">Time (µs)</div>
    <div id="timeline"></div>
    <div id="slider"></div>
  </div>
</div>
<br />
<!--IPC stack-->
<div id ="ipcchartcontent">
  <div id="content">
    <form id="side_panel">

      <section>
        <h6>Smoothing</h6>
        <div id="ipcsmoother"></div>
        <div id="ipcyaxislabel" class="vertical-text" style="text-align:center;">IPC</div>
      </section>

    </form>

  <div id="chart_container">
    <div id="ipcchart"></div>
    <div id="xaxislabel">Time (µs)</div>
    <br /><br />
  </div>
</div>

<script type="text/javascript">
var ipcgraph;
var graph = new Rickshaw.Graph.Ajax( {
	element: document.getElementById("ipcchart"),
	width: 800,
	height: 150,
	renderer: 'area',
	defaultInterpolation: 'step-after',
	stroke: true,
	dataURL: ipcfilename,
	onData: function(d) { return d },
	onComplete: function(transport) {
		var graph = ipcgraph = transport.graph;
		var hoverDetail = new Rickshaw.Graph.HoverDetail( {
			graph: graph,
			xFormatter: function(x) {
					return x+" µs";
			},

			yFormatter: function(y) {
					return Math.round(y*100)/100 + " IPC";
				},
			} );
		var controls = new RenderControls( {
			element: document.querySelector('form'),
			graph: graph
		} );

		var smoother = new Rickshaw.Graph.Smoother( {
			graph: graph,
			element: $('#ipcsmoother')
		} );
		var ticksTreatment = 'glow';

		var yAxis = new Rickshaw.Graph.Axis.Y( {
			graph: graph,
			tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
			ticksTreatment: ticksTreatment,
			element: document.getElementById('y_axis')
		} );

		yAxis.render();

		var xAxis = new Rickshaw.Graph.Axis.X( {
			graph: graph,
			tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
			ticksTreatment: ticksTreatment,
			orientation: "bottom",
		} );

		xAxis.render();
	},
	series: [
		{
			name: 'IPC',
			color: palette.color()
		}
	]
} );


</script>



<script type="text/javascript">
function createGraph(mcpatoption) {
  $('#chart').empty();
  $('#legend').empty();
  $('#timeline').empty();

  if (mcpatoption=="power"){
    document.getElementById('yaxislabel').innerHTML = "Power (W)"
    var filename = "data/".concat(info.name.concat("-power.json"));
    labels = powerlabels;
    yformatter = function(series, x, y) {
				var content = series.name+": "+Math.round(y*100)/100+ " Watt";
				return content;
			};
  }
  else if (mcpatoption=="energy"){
    document.getElementById('yaxislabel').innerHTML = "Energy (J)"
     var filename = "data/".concat(info.name.concat("-energy.json"));
    labels = energylabels;
    yformatter = function(series, x, y) {
				var content = series.name+": "+y+ " Joule";
				return content;
			};
  }
  else if (mcpatoption=="energypercentage"){
     document.getElementById('yaxislabel').innerHTML = "Energy (%)"
     var filename = "data/".concat(info.name.concat("-energypercentage.json"));
    labels = energypercentagelabels;
    yformatter = function(series, x, y) {
				var content = series.name+": "+Math.round(y*100)/100+ " %";
				return content;
			};
  }


  var graph = new Rickshaw.Graph.Ajax( {
	element: document.getElementById("chart"),
	width: 800,
	height: 400,
	renderer: 'area',
	defaultInterpolation: 'step-after',
	stroke: true,
	dataURL: filename,
	onData: function(d) { return d },
	onComplete: function(transport) {
		var graph = transport.graph;
		var legend = new Rickshaw.Graph.Legend( {
			graph: graph,
			element: document.getElementById('legend')
		} );
		var slider = new Rickshaw.Graph.RangeSlider( {
			graph: [graph, ipcgraph],
			element: $('#slider')
		} );

		// Reset the IPC graphs when creating a new graph to sync up the RangeSlider
		ipcgraph.window.xMin = undefined;
		ipcgraph.window.xMax = undefined;
		ipcgraph.update();

		var hoverDetail = new Rickshaw.Graph.HoverDetail( {
			graph: graph,
			formatter: yformatter,
                        xFormatter: function(x) {
		  		return x+" µs";
				}
		} );

		var order = new Rickshaw.Graph.Behavior.Series.Order( {
			graph: graph,
			legend: legend
		} );
		var controls = new RenderControls( {
			element: document.querySelector('form'),
			graph: graph,
		} );

		var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
			graph: graph,
			legend: legend
		} );
		var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
			graph: graph,
			legend: legend
		} );

		var smoother = new Rickshaw.Graph.Smoother( {
			graph: graph,
			element: $('#smoother')
		} );
		var ticksTreatment = 'glow';

		var yAxis = new Rickshaw.Graph.Axis.Y( {
			graph: graph,
			tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
			ticksTreatment: ticksTreatment,
			element: document.getElementById('y_axis')
		} );

		yAxis.render();

		var xAxis = new Rickshaw.Graph.Axis.X( {
			graph: graph,
			tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
			ticksTreatment: ticksTreatment,
			orientation: "bottom",
		} );

		xAxis.render();

		var annotator = new Rickshaw.Graph.Annotate( {
			graph: graph,
			element: document.getElementById('timeline')
		} );


		var numberofmarkers = markerinfo.markers.length;

		for (var i=0; i<numberofmarkers; i++)
		  {
			annotator.add(markerinfo.markers[i].timestamp, markerinfo.markers[i].marker);
		  }
		annotator.update();
	},
	series: labels


	} );

}

</script>

<script type="text/javascript">
$('#ipcgraphshow').change(function() {
  $('#ipcchartcontent').slideToggle('slow', function() {

  });
});


</script>


<script type="text/javascript">
$('#ipcchartcontent').hide();
createGraph('power');
</script>


</body>
